vue尚品汇商城项目 |
您所在的位置：网站首页 › vue 30项目 › vue尚品汇商城项目 |
vue尚品汇商城项目
|
vue尚品汇商城项目-day05【30.登录与注册静态组件（处理公共图片资源问题）+31.注册的业务+登录业务】
原创
刘大猫26 2023-04-08 08:52:16 博主文章分类：Vue2专栏 ©著作权 文章标签 vue2 vue尚品汇商城项目 登录业务 注册的业务 登录与注册静态组件 文章分类 JavaScript 前端开发 ©著作权归作者所有：来自51CTO博客作者刘大猫26的原创作品，请联系作者获取转载授权，否则将追究法律责任
修改代码： 在assets/新建images/文件夹，并把共用图片icons.png放在里面； 同时删除src/pages/Home/ListContainer/images路径下的icons.png图片 src/pages/Login/index.vue background: url(~@/assets/images/icons.png) no-repeat -10px -201px;src/pages/Home/ListContainer/index.vue background-image: url(~@/assets/images/icons.png);注意点1：把共用的图片icons.png放在目录下assets/images/，在CSS中使用时写成~@/xxx/icons.png，即可使用。 31.注册的业务重难点说明 注册/登陆请求后组件的响应处理登陆后自动携带token数据注册业务|登录业务中表单验证先不处理【最后一天统一处理】获取验证码的接口注册—通过数据库存储用户信息（名字、密码）修改代码： src/api/index.js //获取验证码 //URL:/api/user/passport/sendCode/{phone} method:get export const getCode = (phone)=>requests({url:`/user/passport/sendCode/${phone}`,method:'get'}); //注册 //url:/api/user/passport/register method:post phone code password export const registerUser = (params)=>requests({url: `/user/passport/register`,method: 'post', data: params});src/store/index.js 把注册js和登录js合并到一起，统一叫用户模块业务src/store/loginAndRegister/index.js import {getCode, registerUser} from "@/api"; //Login+register模块的小仓库 //actions代表一系列动作，可以书写自己的业务逻辑，也可以处理异步 const actions = { //获取验证码 async getCode({commit}, phone) { let response = await getCode(phone); console.log("******获取验证码-response:{}", response); if (response.code == 200) { commit('GET_CODE', response.data); //返回的是成功的标记 return "OK"; } else { //返回的是失败的标记 return Promise.reject(new Error("fail")) } }, //用户注册 async registerUser({commit}, data) { let response = await registerUser(data); console.log("******注册用户-response:{}", response); if (response.code == 200) { //返回的是成功的标记 return "OK"; } else { //返回的是失败的标记 return Promise.reject(new Error("fail")) } }, } //mutations代表维护，操作维护的是state中的数据，且state中数据只能在mutations中处理 const mutations = { GET_CODE(state, code) { state.code = code; } } //state代表仓库中的数据 const state = { code: '' } //getters理解为计算属性，用于简化仓库数据，让组件获取仓库的数据更加方便 const getters = {} //创建并暴露store export default { actions, mutations, state, getters }src/pages/Register/index.vue 获取验证码 data() { return { // 收集表单数据--手机号 phone: '', //验证码 code: '', //密码 password: '', //确认密码 passwordConfirm: '', //是否同意 checkedAgreement: true, } }, methods: { //获取验证码 async getCode() { try { //成功 //如果获取到验证码 const {phone} = this; phone && await this.$store.dispatch('getCode', phone); //将组件的code属性值变为仓库中验证码[验证码直接自己填写了] this.code = this.$store.state.user.code; } catch (error) { //失败 alert(error.message) } }, //用户注册 async registerUser() { try { //成功 //全部表单验证成功，在向服务器发请求，进行祖册 //只要有一个表单没有成功，不会发请求 const {phone, code, password, passwordConfirm} = this phone && code && password==passwordConfirm && await this.$store.dispatch('registerUser', {phone, password, code}) //注册成功进行路由的跳转 this.$router.push('/login') } catch (error) { //失败 alert(error.message) } }, },32.登录业务登录—登陆成功的时候，后台为了区分你这个用户是谁-服务器下发token【令牌：唯一标识符】修改代码： src/api/index.js //登录 //URL:/api/user/passport/login method:post phone password export const reqUserLogin = (data)=>requests({url:'/user/passport/login',data,method:'post'});src/store/loginAndRegister/index.js import {reqUserLogin} from "@/api"; //用户登录 async reqUserLogin({commit}, data) { let response = await reqUserLogin(data); console.log("******登录用户-response:{}", response); //服务器下发token，用户唯一标识符(uuid) //将来经常通过带token找服务器要用户信息进行展示 if (response.code == 200) { //用户已经登录成功且获取到token commit('REQ_USER_LOGIN', response.data.token); //返回的是成功的标记 return "OK"; } else { //返回的是失败的标记 return Promise.reject(new Error(response.message)) } }, REQ_USER_LOGIN(state, token) { state.token = token; }, token: '',src/pages/Login/index.vue 登 录 methods: { //登录的回调函数 async reqUserLogin() { try { //成功 const {phone, password} = this; phone && password && await this.$store.dispatch('reqUserLogin',{phone, password}); this.$router.push("/home"); } catch (error) { //失败 alert(error.message) } } }注意点1：vuex存储的数据不是持久化的，一刷新页面就没了。 注意点2：登录接口会返回一个token令牌，这个是后端生成的，跟咱之前前端生成的uuid不一样。 注意点3：给登录按钮绑定事件时，要清除form上面的action条件以及默认跳转，否则会出现哪怕登录失败后也会跳转页面到首页的场景 改为 登 录赞 收藏 评论 分享 举报 上一篇：vue尚品汇商城项目-day06【37.获取交易数据+38.用户地址信 下一篇：vue尚品汇商城项目-day07【55.编码测试与打包发布项目】 |
【本文地址】